<include file="Public/header" title="地图显示"/>
<style type="text/css">
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
        font-size: 14px;
    }

    #l-map {
        width: 100%;
        height: 500px;
        overflow: hidden;
    }

    #result {
        width: 100%;
    }

    li {
        line-height: 28px;
    }

    .cityList {
        height: 320px;
        width: 372px;
        overflow-y: auto;
    }

    .sel_container {
        z-index: 9999;
        font-size: 12px;
        position: absolute;
        right: 0px;
        top: 0px;
        width: 140px;
        background: rgba(255, 255, 255, 0.8);
        height: 30px;
        line-height: 30px;
        padding: 5px;
    }

    .map_popup {
        position: absolute;
        z-index: 200000;
        width: 382px;
        height: 344px;
        right: 0px;
        top: 40px;
    }

    .map_popup .popup_main {
        background: #fff;
        border: 1px solid #8BA4D8;
        height: 100%;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 2;
    }

    .map_popup .title {
        background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
        color: #6688CC;
        font-weight: bold;
        height: 24px;
        line-height: 25px;
        padding-left: 7px;
    }

    .map_popup button {
        background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
        cursor: pointer;
        height: 12px;
        position: absolute;
        right: 4px;
        top: 6px;
        width: 12px;
    }
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=asuR3E6yco8LLhPw7h1LPPGzSjTejTyz" type="text/javascript"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>
<!-- 加载城市列表 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>

<div id="page-wrapper" style="padding-top: 6%">

    <div id="dituContent" style="height:750px"></div>
</div>

<script type="text/javascript">

    var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", new BMap.Size(23, 25), {
        imageOffset: new BMap.Size(-46, -21),
        infoWindowOffset: new BMap.Size(12 + 5, 1),
        offset: new BMap.Size(9, 25)
    })

    initMap();
    setMapEvent();
    intMarkers();

    function initMap(){
        var map = new BMap.Map("dituContent");          // 创建地图实例
        var point = new BMap.Point(113.665659, 34.753622);  // 创建点坐标
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom();
        map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        window.map = map;
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    function intMarkers(){
        $.ajax({
            url: "{:U('Map/getPosition')}",
            type: 'POST',
            dataType: 'json',
            timeout: 80000,
            data: {

            },
            success: function (data) {
                if(data.status == 200){
                    if(data.content != null){
                        var content = eval(data.content);
                        for(var index = 0; index < content.length; index++){
                            var info = content[index];
                            var point = info.point;
                            var p0 = point.split("|")[0];
                            var p1 = point.split("|")[1];
//                            alert(p0+"  :  "+p1);
                            var point = new BMap.Point(p0,p1);
                            var marker = new BMap.Marker(point,{icon:icon});
//                            var iw = createInfoWindow(info);
                            var label = new BMap.Label(info.title,{"offset":new BMap.Size(20,-20)});
                            label.setStyle({
                                borderColor:"#00000000",
                                fontSize : "12px",
                                display:"block",
                                color:"#333",
                                cursor:"pointer"
                            });
                            marker.setLabel(label);

//                            marker.addEventListener("mouseover", function(){
//                                label.setStyle({
//                                    borderColor:"#808080",
//                                    fontSize : "12px",
//                                    display:"block",
//                                    color:"#333",
//                                    cursor:"pointer"
//                                });
//                            });

//                            marker.addEventListener("mouseout", function(){
//                                label.setStyle({
//                                    display:"none"
//                                });
//                            });

                            map.addOverlay(marker);

//                            (function(){
//                                var _iw = createInfoWindow(info);
//                                var _marker = marker;
//
//                                _marker.addEventListener("click",function(){
//                                    this.openInfoWindow(_iw);
//                                });
//
//                                _iw.addEventListener("open",function(){
//                                    _marker.getLabel().hide();
//                                })
//
//                                _iw.addEventListener("close",function(){
//                                    _marker.getLabel().show();
//                                })
//                                label.addEventListener("click",function(){
//                                    _marker.openInfoWindow(_iw);
//                                })
//
////                                if(!!info.isOpen){
////                                    label.hide();
////                                    _marker.openInfoWindow(_iw);
////                                }
//                            })()
                        }
                    }
                }

            },
            error: function () {
            }
        });
    }

    function createInfoWindow(info){
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + info.title + "'>" + info.title + "</b><div class='iw_poi_content'>"+info.addr+"</div>");
        return iw;
    }
</script>

<include file="Public/footer"/>